<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta charset="utf-8">
    <title>会员约课</title>
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/favicon.ico"/>
    <link rel="bookmark" href="${pageContext.request.contextPath}/favicon.ico"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/webjars/layui/css/layui.css" media="all">
    <script type="application/javascript" src="${pageContext.request.contextPath}/webjars/layui/layui.js"
            charset="utf-8"></script>
    <script type="application/javascript" src="${pageContext.request.contextPath}/webjars/jquery/jquery.js"></script>
    <script type="application/javascript"
            src="${pageContext.request.contextPath}/private/js/loading/ajaxloading.js"></script>
    <style type="text/css">
        .layui-table-view .layui-form-radio {
            line-height: 0;
            padding: 30%;
        }
    </style>
</head>
<body>
<fieldset class="layui-elem-field">
    <legend>查询条件</legend>
    <form id="form1" class="layui-form" action="">
        <table width="96%" align="center">
            <tr height="23">
                <td align="center">课程名称:</td>
                <td>
                    <input type="hidden" id="userid" name="userid" value="${userid}" >
                    <input id="classname" name="classname" class="layui-input" type="text" placeholder="请输课程名称关键字"
                           autocomplete="off"
                           lay-verify="classname">
                </td>
                <td align="center">开课日期:</td>
                <td>
                    <input id="starttime" name="starttime" class="layui-input" type="text" placeholder="yyyy-MM-dd"
                           autocomplete="off"
                           lay-verify="starttime">
                </td>
                <td align="center">授课教练:</td>
                <td align="left">
                    <select id="coachid" name="coachid" lay-verify="coachid" lay-search>
                        <option value="">录入关键字查询并选择</option>
                    </select>
                </td>
            </tr>
            <tr height="23">
                <td colspan="6" align="center">
                    <button class="layui-btn" lay-submit lay-filter="query">查询</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </td>
            </tr>
        </table>
    </form>
</fieldset>

<fieldset class="layui-elem-field">
    <legend>课程列表</legend>
    <table class="layui-table" lay-filter="gridfilter"
           lay-data="{url:'',page:true, id:'gridresult',height:'330px',defaultToolbar: ['filter']}">
        <thead>
        <tr>
            <th lay-data="{field:'recordid',hide:true}">开班id</th>
            <th lay-data="{field:'classid',hide:true}">课程id</th>
            <th lay-data="{field:'coachid',hide:true}">教练id</th>
            <th lay-data="{field:'status',hide:true}">课程状态编码</th>
            <th lay-data="{field:'classname',align:'center'}">课程名称</th>
            <th lay-data="{field:'agerange',align:'center'}">适龄年龄段</th>
            <th lay-data="{field:'coachname',align:'center'}">上课教练</th>
            <th lay-data="{field:'address',align:'center'}">上课地点</th>
            <th lay-data="{field:'starttime',align:'center'}">开课日期</th>
            <th lay-data="{field:'begintime',align:'center'}">上课时间</th>
            <th lay-data="{field:'endtime',align:'center'}">下课时间</th>
            <th lay-data="{field:'maxnum',align:'center'}">最大上课人数</th>
            <th lay-data="{field:'currnum',align:'center'}">报名人数</th>
            <th lay-data="{field:'statustext',align:'center'}">课程状态</th>
        </tr>
        </thead>
    </table>

</fieldset>

<fieldset class="layui-elem-field">
    <legend>会员列表</legend>
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">未签到列表</li>
            <li>已签到列表</li>
            <li>已销课时列表</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <table class="layui-table" lay-filter="gridfilter_appointment1"
                       lay-data="{url:'',page:true, id:'gridresult_appointment1',height:'330px',toolbar:'#toolbarDemo1',defaultToolbar: ['filter']}">
                    <thead>
                    <tr>
                        <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
                        <th lay-data="{field:'appointmentid',hide:true}">预约id</th>
                        <th lay-data="{field:'recordid',hide:true}">开班id</th>
                        <th lay-data="{field:'userid',hide:true}">会员id</th>
                        <th lay-data="{field:'username',align:'center'}">会员姓名</th>
                        <th lay-data="{field:'telephone',align:'center'}">会员手机号</th>
                        <th lay-data="{field:'cid',hide:true}">上课孩子id</th>
                        <th lay-data="{field:'cname',align:'center'}">上课孩子姓名</th>
                        <th lay-data="{field:'status',hide:true}">课程完成情况code</th>
                        <th lay-data="{field:'statustext',align:'center'}">课程完成情况</th>
                    </tr>
                    </thead>
                </table>
            </div>
            <div class="layui-tab-item">
                <table class="layui-table" lay-filter="gridfilter_appointment2"
                       lay-data="{url:'',page:true, id:'gridresult_appointment2',height:'330px',toolbar:'#toolbarDemo2',defaultToolbar: ['filter']}">
                    <thead>
                    <tr>
                        <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
                        <th lay-data="{field:'appointmentid',hide:true}">预约id</th>
                        <th lay-data="{field:'recordid',hide:true}">开班id</th>
                        <th lay-data="{field:'userid',hide:true}">会员id</th>
                        <th lay-data="{field:'username',align:'center'}">会员姓名</th>
                        <th lay-data="{field:'telephone',align:'center'}">会员手机号</th>
                        <th lay-data="{field:'cid',hide:true}">上课孩子id</th>
                        <th lay-data="{field:'cname',align:'center'}">上课孩子姓名</th>
                        <th lay-data="{field:'status',hide:true}">课程完成情况code</th>
                        <th lay-data="{field:'statustext',align:'center'}">课程完成情况</th>
                    </tr>
                    </thead>
                </table>
            </div>
            <div class="layui-tab-item">
                <table class="layui-table" lay-filter="gridfilter_appointment4"
                       lay-data="{url:'',page:true, id:'gridresult_appointment4',height:'330px',defaultToolbar: ['filter']}">
                    <thead>
                    <tr>
                        <th lay-data="{field:'appointmentid',hide:true}">预约id</th>
                        <th lay-data="{field:'recordid',hide:true}">开班id</th>
                        <th lay-data="{field:'userid',hide:true}">会员id</th>
                        <th lay-data="{field:'username',align:'center'}">会员姓名</th>
                        <th lay-data="{field:'telephone',align:'center'}">会员手机号</th>
                        <th lay-data="{field:'cid',hide:true}">上课孩子id</th>
                        <th lay-data="{field:'cname',align:'center'}">上课孩子姓名</th>
                        <th lay-data="{field:'status',hide:true}">课程完成情况code</th>
                        <th lay-data="{field:'statustext',align:'center'}">课程完成情况</th>
                        <th lay-data="{field:'consumes',align:'center'}">消耗总课时数</th>
                        <th lay-data="{field:'consumest',align:'center'}">消耗体验课时数</th>
                        <th lay-data="{field:'operationid',hide:true}">销课时经办人id</th>
                        <th lay-data="{field:'operationname',align:'center'}">销课时经办人</th>
                        <th lay-data="{field:'operationtime',align:'center'}">销课时经办时间</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</fieldset>
</body>
<script id="toolbarDemo1" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="qiandao">签到</button>
    </div>
</script>
<script id="toolbarDemo2" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="weiqiandao">取消签到</button>
        <button class="layui-btn layui-btn-sm" lay-event="xiaoke">销课</button>
    </div>
</script>
<script type="application/javascript">
    var form;
    layui.use(['form', 'table','laydate','element'], function () {
        form = layui.form;
        //数据表格模块
        var table = layui.table;
        //日期控件
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#starttime' //指定元素
        });
        //监听提交
        form.on('submit(query)', function (data) {
            table.reload('gridresult', {
                url: '${pageContext.request.contextPath}/eyas/recordinfo/queryRecordInfoForYK'
                , where: data.field //设定异步数据接口的额外参数
                , page: {
                    curr: 1
                },
                method:'get'
            });
            return false;
        });

        var select_recordid;
        //监听行单击事件
        table.on('row(gridfilter)', function(obj){
            var data = obj.data;
            select_recordid = data.recordid;
            //标注选中样式
            obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
            //加载未签到人员列表
            fn_table_reload('gridresult_appointment1','${pageContext.request.contextPath}/eyas/appointmentinfo/queryAppointmentStatus',select_recordid,'1',table);
            //加载已签到人员列表
            fn_table_reload('gridresult_appointment2','${pageContext.request.contextPath}/eyas/appointmentinfo/queryAppointmentStatus',select_recordid,'2',table);
            //加载已销课时人员列表
            fn_table_reload('gridresult_appointment4','${pageContext.request.contextPath}/eyas/appointmentinfo/queryAppointmentStatus',select_recordid,'4',table);
        });
        //加载教练下拉框
        selectCoachInfo();


        //头工具栏事件
        table.on('toolbar(gridfilter_appointment1)', function (obj) {
            if (obj.event === 'qiandao') {
                var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
                var data = checkStatus.data;  //获取选中行数据
                if(!data||data.length==0) {
                    layer.msg("请选择要签到的会员信息");
                    return;
                }
                saveInfo(data,'2',function () {
                    //加载未签到人员列表
                    fn_table_reload('gridresult_appointment1','${pageContext.request.contextPath}/eyas/appointmentinfo/queryAppointmentStatus',select_recordid,'1',table);
                    //加载已签到人员列表
                    fn_table_reload('gridresult_appointment2','${pageContext.request.contextPath}/eyas/appointmentinfo/queryAppointmentStatus',select_recordid,'2',table);
                });
            }
        });

        table.on('toolbar(gridfilter_appointment2)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
            var data = checkStatus.data;  //获取选中行数据
            if(!data||data.length==0) {
                layer.msg("请选择会员信息");
                return;
            }
            if (obj.event === 'weiqiandao') {
                saveInfo(data,'1',function () {
                    //加载未签到人员列表
                    fn_table_reload('gridresult_appointment1','${pageContext.request.contextPath}/eyas/appointmentinfo/queryAppointmentStatus',select_recordid,'1',table);
                    //加载已签到人员列表
                    fn_table_reload('gridresult_appointment2','${pageContext.request.contextPath}/eyas/appointmentinfo/queryAppointmentStatus',select_recordid,'2',table);
                });
            }else if(obj.event === 'xiaoke') {
                saveInfo(data,'4',function () {
                    //加载已签到人员列表
                    fn_table_reload('gridresult_appointment2','${pageContext.request.contextPath}/eyas/appointmentinfo/queryAppointmentStatus',select_recordid,'2',table);
                    //加载已销课时人员列表
                    fn_table_reload('gridresult_appointment4','${pageContext.request.contextPath}/eyas/appointmentinfo/queryAppointmentStatus',select_recordid,'4',table);
                });
            }
        });
    });


    function fn_table_reload(table_id,url,recordid,status,table) {
        table.reload(table_id, {
            url: url
            , where: {recordid:recordid,status:status} //设定异步数据接口的额外参数
            , page: {
                curr: 1
            },
            method:'get'
        });
    }

    function selectCoachInfo() {
        $.ajax({
            url:"${pageContext.request.contextPath}/eyas/coachinfo/queryCoachInfoList",
            type:"GET",
            dataType:"json",
            success:function(result){
                var list = result;    //返回的数据
                var role = document.getElementById("coachid");        //add_role_name给select定义的id
                for(var i=0;i<list.length;i++){
                    var option = document.createElement("option");    // 创建添加option属性
                    option.setAttribute("value",list[i].coachid);                  // 给option的value添加值
                    if(list[i].coachid=='${recordInfo.coachid}')
                        option.setAttribute("selected","selected");
                    option.innerText=list[i].coachname;             // 打印option对应的纯文本 （超级管理员、管理员）
                    role.appendChild(option);                          // 给select 添加option子标签
                }

                form.render("select");                                // 刷性select，显示出数据
            },
            error:function(xdata){
                layer.msg(xdata.responseJSON.errormsg);
            }
        });
    }

    function saveInfo(select_objs,status,fn_callback) {
        $.ajax({
            url:"${pageContext.request.contextPath}/eyas/sellinglessons/updateAppointments/"+status,
            type:"POST",
            data:{select_objs:JSON.stringify(select_objs) },
            dataType:"json",
            success:function(result){
                layer.msg("保存成功");
                fn_callback();
            },
            error:function(xdata){
                layer.msg(xdata.responseJSON.errormsg);
            }
        });
    }
</script>
</html>
